<template>
    <el-dialog :title="title" v-model="drawer" width="700px" :append-to-body="true" @close="close">
        <el-form :model="form" :rules="rules" size="small" label-width="150px" ref="ruleRefForm" class="refForm">
            <el-form-item label="标题:" prop="noticeTitle">
                <el-input v-model="form.noticeTitle" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="form.status">
                    <el-radio v-for="(item, index) in publishStatusOptions" :label="item.value">{{ item.label }}
                    </el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="公告类型">
                <el-radio-group v-model="form.noticeType">
                    <el-radio v-for="(item, index) in noticeTypeOptions" :label="item.value">{{ item.label }}
                    </el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="内容" prop="noticeContent">
                <el-input v-model="form.noticeContent" type="textarea"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="form.remark" type="textarea"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" size="small" @click="submitForm(ruleRefForm)">保存</el-button>
                <el-button size="small" @click="close()">取消</el-button>
            </span>
        </template>
    </el-dialog>

<!--     <el-dialog v-model="dialogBannerVisible" title="图片预览">
        <img w-full :src="dialogImageUrl" alt="图片预览" style="display:block;margin: 0 auto;width:100%" />
    </el-dialog> -->

</template>

<script>
import {
    computed,
    reactive,
    toRefs,
    ref
} from 'vue'
import {
    ElMessage
} from 'element-plus'
import { create, update } from '/@/api/pms/notice'
export default {
    name: 'NoticeDetail',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        defaultForm: {
            type: Object,
            default() {
                return {}
            }
        },
        title: {
            type: String,
            default: '新增'
        },
        publishStatusOptions: {
            type: Array,
            default() {
                return []
            }
        }
    },
    setup(props, context) {
        const {
            dialogDrawer,
            defaultForm
        } = toRefs(props)
        const ruleRefForm = ref()
        const uploadBanner = ref()
        const uploadIcon = ref()
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        let form = computed({
            get: () => defaultForm.value,
            set: val => {
                context.emit('update:defaultForm', val)
            }
        })
        const state = reactive({
            uploadUrl: '/api/file/filaAttach/upload',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            rules: {
                noticeTitle: [{
                    required: true,
                    message: '请输入标题',
                    trigger: 'blur'
                }],
                noticeContent: [{
                    required: true,
                    message: '请输入公告内容',
                    trigger: 'blur'
                }]
            },
            noticeTypeOptions: [
                {
                    value: '1',
                    label: '通知',
                },
                {
                    value: '2',
                    label: '公告',
                },
            ],
            dialogShopVisible: false,
            dialogImageUrl: null,
            dialogBannerVisible: false
        })
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        const submitForm = async (formEl) => {
            if (!formEl) return
            await formEl.validate((valid) => {
                if (valid) {
                    let data = form.value
                    if (data.noticeId != null && data.noticeId != '') {
                        update(data).then(res => {
                            if (res.code == 0) {
                                ElMessage.success("修改成功");
                                context.emit('onDetailSubmit', true)
                            } else {
                                ElMessage.error("修改失败");
                            }
                        })
                    }
                    // 新增
                    else {
                        create(data).then(res => {
                            if (res.code == 0) {
                                ElMessage.success("添加成功");
                                context.emit('onDetailSubmit', true)
                            } else {
                                ElMessage.error("添加失败");
                            }
                        })

                    }
                }
            })

        }
        const resetForm = (formEl) => {
            context.emit('update:dialogDrawer', false)
        }

        const handlePictureCardPreview = (file) => {
            state.dialogImageUrl = file.url
            state.dialogBannerVisible = true
        }
        const handleRemove = (val, file) => {
            uploadBanner.value.handleRemove(file)
        }
        const backageImagesOnSuccess = (response, uploadFiles) => {
            let d = []
            d.push({ name: response.data.name, url: response.data.src })
            form.value.backageImage = d
            form.value.pic = form.value.backageImage[0].url
        }

        return {
            drawer,
            form,
            submitForm,
            resetForm,
            close,
            ruleRefForm,
            uploadBanner,
            handlePictureCardPreview,
            handleRemove,
            uploadIcon,
            backageImagesOnSuccess,
            ...toRefs(state)
        }
    }

}
</script>

<style>

</style>
